<script>


export default {
  data() {
    return {
      agreedToPrivacyPolicy: false,
      form: {},

    };
  },
  methods: {
    login() {
      if (this.username ||this.password ||!this.agreedToPrivacyPolicy==true) {
        this.$message.error('请填写完整信息');
        return
      }
      this.axios.post('http://localhost:9000/a/user/login', this.form).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'ok',
            message: "登录成功"
          })
          localStorage.setItem("user",JSON.stringify(res.data.data))
          this.$router.push('/workbench')
        } else {
          this.$message({
            type: 'fail',
            message: res.data.data
          })
        }
      })
    },
    showPrivacyPolicyAlert() {
      alert('系统漏洞百出，功能强大无比');
    },

  },
  created() {

  }
};
</script>

<template>
  <div class="yemian">
    <div class="loginvue">
      <h1 style="color: white;font-size: 40px;margin-bottom: 100px">家庭医生后台管理系统</h1>
      <el-form :model="form" class="login-form">
        <el-form-item label="用户名" style="color: #f2f2f2">
          <el-input v-model="form.username" placeholder="请输入用户名" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="color: #f2f2f2">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" style="width: 80%">登录</el-button>
        </el-form-item>
        <label>
          <input type="checkbox" v-model="agreedToPrivacyPolicy">
          <a href="#" @click.prevent="showPrivacyPolicyAlert" style="color:#ff0000">我已阅读并同意《用户隐私政策》</a>
        </label>
      </el-form>
      <p style="color: #ffffff">忘记密码请联系管理员</p>
    </div>
  </div>
</template>

<style>
.yemian{
    width: 100%;
    height: 997px;
    background-image: url('https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/R-C.jpg');
    background-size: cover; /* 使背景图片覆盖整个div区域，可能会裁剪图片 */
    background-position: center center; /* 图片在div中居中显示 */
    background-repeat: no-repeat; /* 防止图片重复平铺 */
}
h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}
label {
  display: block;
  margin-bottom: 10px;
  color: #666;
}
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
}
a {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #007bff;
  text-decoration: none;
}
.loginvue{
  width: 400px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>
